<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/facelets/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"                 
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:param name="title" value="#{msg.myProfileTitle}"/>
<ui:define name="headerBar">
    <ui:include src="WEB-INF/facelets/headerBar.xhtml"/>
</ui:define>

<ui:define name="pageContents">
    
    <h:outputScript library="js" name="imagemenu.js" target="head"/>
    
    <h:form id="myForm">
    <h:panelGrid id="myProfile" columns="2">
        <f:facet name="header">
            <h:outputText value="#{msg.myProfilePanelHeader}: #{myProfileBackingBean.user.username}"/>
        </f:facet>
        <h:graphicImage id="myProfileImage"
         url="#{myProfileBackingBean.user.profilePic}" />
        <h:panelGrid id="myProfileInner" columns="2">
            <h:outputLabel for="myDateOfBirth" value="#{msg.myProfileLabelDob}" />
 
            <h:panelGroup id="myDateOfBirth">                                
                <h:selectOneMenu id="myDobYear" value="#{myProfileBackingBean.year}">                    
                    <c:forEach var="i" begin="0" end="82">
                        <f:selectItem itemValue="#{i+1911}"/>
                    </c:forEach>
                </h:selectOneMenu>
                <h:selectOneMenu id="myDobMonth" value="#{myProfileBackingBean.month}">                    
                    <c:forEach var="i" begin="1" end="12">
                        <f:selectItem itemValue="#{i}"/>
                    </c:forEach>
                </h:selectOneMenu>
                <h:selectOneMenu id="myDobDay" value="#{myProfileBackingBean.day}">                    
                    <c:forEach var="i" begin="1" end="31">
                        <f:selectItem itemValue="#{i}"/>
                    </c:forEach>
                </h:selectOneMenu>
            </h:panelGroup>
            
            <h:outputLabel for="myHeight" value="#{msg.myProfileLabelHeight}" />
            <h:panelGroup>
                <h:selectOneMenu id="myHeight" value="#{myProfileBackingBean.user.userProperties.height}">                    
                    <c:forEach var="i" begin="0" end="60">
                        <f:selectItem itemValue="#{i+150}"/>
                    </c:forEach>
                </h:selectOneMenu>
            <h:outputLabel for="myHeight" value="#{msg.myProfileLabelHeightCm}" />
            </h:panelGroup>

            <h:outputLabel for="myChildren" value="#{msg.myProfileLabelChildren}" />
            <h:selectOneMenu id="myChildren" value="#{myProfileBackingBean.user.userProperties.children}" >
                <f:selectItem itemLabel="#{msg.yes}" itemValue="true"/>
                <f:selectItem itemLabel="#{msg.no}" itemValue="false"/>
            </h:selectOneMenu>
            <h:outputLabel for="meSmoker" value="#{msg.myProfileLabelSmoker}" />
            <h:selectOneMenu id="meSmoker" value="#{myProfileBackingBean.user.userProperties.tobaccoUser}" >
                <f:selectItem itemLabel="#{msg.yes}" itemValue="true"/>
                <f:selectItem itemLabel="#{msg.no}" itemValue="false"/>
            </h:selectOneMenu>
            <h:outputLabel for="myPresentation" value="#{msg.myProfilePresentation}" />
            <h:inputTextarea id="myPresentation" rows="10" cols="30" value="#{myProfileBackingBean.user.presentation}" />
            
        </h:panelGrid>
        <f:facet name="footer">
                <p:commandButton value="#{msg.saveProfile}" id="submit" ajax="false"
                  action="#{myProfileBackingBean.saveProfile}" />
        </f:facet>
    </h:panelGrid>
    </h:form>
    
    <div id="imageDialog" >
        <h:outputText id="imageDialogText" value="#{msg.myProfileImageLabel}"/>
        <h:form id="imageDialogForm">
        <h:panelGrid id="myImageURLPanel" columns="2">
            <h:outputLabel id="myImageURLLabel" for="myImageURL" value="#{msg.myProfileImageURLLabel}" />
            <h:inputText id="myImageURL" value="#{myProfileBackingBean.user.profilePic}" />
        </h:panelGrid>
        <p:commandButton id="imageDialogSubmit" value="#{msg.saveProfile}" ajax="false"
            action="#{myProfileBackingBean.saveProfile}" />
        </h:form>
    </div>

</ui:define>

<ui:param name="h1" value="#{msg.myProfileHeader}"/>

</ui:composition>